var app = new Vue({
    el : '#app',
    data : {
        message : '',
    }
})

var app2 = new Vue({
    el : '#app-2',
    data : {
        message : '页面加载于' + new Date().toLocaleString()
    }
})
// console.log(app2.$el)
// app2.$el = app.$el
// console.log(app2.$el)
// app2.$data.message = "新消息"

var app3 = new Vue({
    el : "#app-3",
    data : {
        seen : true,
        seenf : false,
    }
})

var app4 = new Vue({
    el : "#app-4",
    data : {
        todos : [
            { text : '学习' },
            { text : '玩耍' },
            { text : '在玩耍' },
        ]
    }
})
app4.todos.push({text : '还玩吗'})

var app5 = new Vue({
    el : '#app-5',
    data : {
        message: '我 是 一 个 消 息',
    },
    methods : {
        reverseMessage : function () {  
            this.message = this.message.split(" ").reverse().join(" ");
        } 
    }
})

var app6 = new Vue({
    el : "#app-6",
    data : {
        message : "hello vue!"
    }
})

Vue.component('todo-item',{
    props : ['todo'],
    template : '<li>{{todo.x}}-------{{todo.y}}</li>'
})
var app7 = new Vue({
    el : '#app-7',
    data : {
        groceryList : [
            {x : 1, y : '一'},
            {x : 2, y : '二'},
            {x : 3, y : '三'},
        ]
    }
})

var message8 = "我是一个消息！";
var app8 = new Vue({
    el: "#app-8",
    data: {
        message : message8,
        c : 1,
        d : 2,
    }
})
var c = '1';
var d = '2';
app8.$watch(
    a = function () {
        return this.a + this.b;
    }
)

var app9 = new Vue({
    el: "#app-9",
    data : {
        example0: 'q',
        example1: 'w',
        example2: 'e',
    },
    watch: {
        example0(curVal, oldVal) {
            console.log(curVal, oldVal);
        },
        example1: 'a',//值可以为methods的方法名
        example2: {
            //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
            handler(curVal, oldVal) {
                conosle.log(curVal, oldVal)
            },
            deep: true
        }
    },
    methods: {
        a(curVal, oldVal) {
            conosle.log(curVal, oldVal)
        }
    }
})
// app9.example0 = 'a';

var vm = new Vue({
    data: {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
            f: {
                g: 5
            }
        }
    },
    watch: {
        a: function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 深度 watcher
        c: {
            handler: function (val, oldVal) { /* ... */ },
            deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
            handler: function (val, oldVal) { /* ... */ },
            immediate: true
        },
        e: [
            function handle1(val, oldVal) { /* ... */ },
            function handle2(val, oldVal) { /* ... */ }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function (val, oldVal) { /* ... */ }
    }
})
vm.a = 4 


var app10 = new Vue({
    el: '#app10',
    props: {
        test:{
            type: String
        }
    },
    watch:{
        test(){
            console.log(this.test)
        }
            
    }

}) 

